a
<template>
  <div class="app-container">
    <div slot="header" class="back">
      <router-link :to="{name: 'tools-list'}">
        <el-button plain icon="el-icon-back" size="small" :round="true">
          返回
        </el-button>
      </router-link>
    </div>
    <div class="container">
      <div class="container-content">
        <svg-icon icon-class="fb-re-tracking" style="font-size: 100px;height: 80px"></svg-icon>
        <div class="content">
          <div class="container_top">
            <span class="container_title">Facebook 数据辅助工具</span>
          </div>
          <div style="color:#7e849c;font-size:14px">精准高效解决 Apple iOS 14 隐私政策导致的 Facebook 广告数据缺失问题，让优化师准确把握广告效果，精准投放。
          </div>
        </div>
      </div>
    </div>
    <div class="content" style="margin-bottom: 20px;margin-top: 20px;">
      <div>
        <div class="tw-flex tw-items-center tw-pb-2">
          <div
              class="tw-rounded-full tw-flex tw-items-center tw-justify-center tw-border-[1px] tw-border-solid tw-border-[#30344F] tw-w-6 tw-h-6 tw-text-[#30344F] tw-text-base ">
            1
          </div>
          <p class="tw-pl-3 tw-text-base tw-text-gray-300">店铺关联广告账户，共享数据</p></div>
        <div class="tw-border-solid tw-border-0 tw-border-l-[1px] tw-border-[#E8E8E8] tw-pl-[22px] tw-ml-3 tw-mb-2.5 ">
          <div class="tw-pb-[30px]"><p class="tw-pb-4 tw-text-[#989AA6]">添加关联与店铺相对应的广告账户</p>
            <el-button type="primary" class="bison-btn bison-btn-primary" @click="actVisible = true" style="margin-bottom: 12px">关 联</el-button>
            <table-pagination
                v-show="bindData.length"
                :showPagination="false"
                ref="el-search-table"
                :showOperatingButton="false"
                :columns="columns"
                :fetch="getData"
                :form-options="formOptions"
                :page-sizes="[20, 50, 100]"
                list-field="records"
                method="get"
                page-index-key="page"
                page-size-key="pageSize"
                total-field="totalElements"
                type="remote">
              <el-table-column slot="append" label="操作" width="300px">
                <template slot-scope="scope">
                  <el-button plain size="mini" type="danger" @click="handleDelDataTracking(scope.row.id)">解除关联</el-button>
                </template>
              </el-table-column>
            </table-pagination>
          </div>
        </div>
      </div>
      <div>
        <div class="tw-flex tw-items-center tw-pb-2">
          <div
              class="tw-rounded-full tw-flex tw-items-center tw-justify-center tw-border-[1px] tw-border-solid tw-border-[#30344F] tw-w-6 tw-h-6 tw-text-[#30344F] tw-text-base ">
            2
          </div>
          <p class="tw-pl-3 tw-text-base tw-text-gray-300">安装辅助上报工具，建立连接</p></div>
        <div class="tw-border-solid tw-border-0 tw-border-l-[1px] tw-border-[#E8E8E8] tw-pl-[22px] tw-ml-3 tw-mb-2.5 ">
          <div class="tw-pb-[30px]"><p class="tw-pb-4 tw-text-[#989AA6]">使用 Chrome 浏览器插件，将店铺与 FB 广告平台建立连接</p>
            <el-button type="primary" class="bison-btn bison-btn-primary" @click="handleDown"><span>下 载</span></el-button>
          </div>
        </div>
      </div>
      <div>
        <div class="tw-flex tw-items-center tw-pb-2">
          <div
              class="tw-rounded-full tw-flex tw-items-center tw-justify-center tw-border-[1px] tw-border-solid tw-border-[#30344F] tw-w-6 tw-h-6 tw-text-[#30344F] tw-text-base ">
            3
          </div>
          <p class="tw-pl-3 tw-text-base tw-text-gray-300">添加 UTM 参数，订单广告数据双向匹配</p></div>
        <div class="tw-border-solid tw-border-0 tw-border-l-[1px] tw-border-[#E8E8E8] tw-pl-[22px] tw-ml-3 tw-mb-2.5 ">
          <div class="tw-pb-[30px]"><p class="tw-pb-4 tw-text-[#989AA6]">复制给定的utm参数在您想要投放的网站URL的结尾</p>
            <div
                class="tw-py-2 tw-px-3 tw-flex tw-items-center tw-justify-between tw-border-[#D9D9D9] tw-w-max tw-border-solid tw-border-[1px] tw-rounded-sm ">
              <div class="tw-text-gray-300 tw-pr-3 " v-html="paramsContent">
              </div>
              <el-button
                  type="text"
                  icon="el-icon-document-copy"
                  @click="handleCopy(paramsContent)"></el-button></div>
          </div>
        </div>
      </div>
      <div>
        <div class="tw-flex tw-items-center tw-pb-2">
          <div
              class="tw-rounded-full tw-flex tw-items-center tw-justify-center tw-border-[1px] tw-border-solid tw-border-[#30344F] tw-w-6 tw-h-6 tw-text-[#30344F] tw-text-base ">
            4
          </div>
          <p class="tw-pl-3 tw-text-base tw-text-gray-300">自定义广告数据栏目，查看精准广告数据</p></div>
        <div
            class="tw-border-solid tw-border-0 tw-border-l-[1px] tw-border-[#E8E8E8] tw-pl-[22px] tw-ml-3 tw-mb-2.5 tw-border-l-0">
          <div class=""><p class="tw-pb-4 tw-text-[#989AA6]">
            定制栏目，展示广告系列编号，广告组编号，广告编号，成效，花费金额，广告花费回报（ROAS）-购物等六个指标，全面衡量广告成效</p>
            <el-button type="primary" class="bison-btn bison-btn-primary" @click="handlePreview"><span>查看数据</span></el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="关联广告账户" :visible.sync="actVisible" width="600px" center @close="handleRestForm('actForm')">
      <el-form ref="actForm" :model="actConfig" :rules="rules" label-position="top">
        <el-form-item label="广告账户编号" prop="adAccount">
          <el-input type="text" v-model="actConfig.adAccount" placeholder="请输入广告账户编号" />
        </el-form-item>
        <el-form-item label="广告账户时区" prop="timeZone">
          <el-select v-model="actConfig.timeZone" filterable style="width: 100%">
            <el-option
                v-for="item in timeZones"
                :key="item.value"
                :label="item.name"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="actVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="handleSubmit('actForm')">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import TablePagination from '_c/Tables/table-pagination';
import {addFbReTracking, fbReTrackingList, delReTracking, getTiktokPixel, updatefbTrack} from '@/api/app-market';

export default {
    components: {TablePagination},
    data () {
        return {
            isEdit: false,
            paramsContent: '?utm_campaign={{campaign.id}}&utm_adset={{adset.id}}&utm_ad={{ad.id}}',
            submitLoading: false,
            isHasValue: false,
            actVisible: false,
            bindData: [],
            actConfig: {
                adAccount: '',
                timeZone: ''
            },
            timeZones: [
                {
                    name: '(GMT +13:00) 奥克兰时间',
                    value: '+13:00'
                },
                {
                    name: '(GMT +12:00) 堪察加时间',
                    value: '+12:00'
                },
                {
                    name: '(GMT +11:00) 悉尼时间',
                    value: '+11:00'
                },
                {
                    name: '(GMT +10:00) 符拉迪沃斯托克时间',
                    value: '+10:00'
                },
                {
                    name: '(GMT +09:00) 东京时间',
                    value: '+09:00'
                },
                {
                    name: '(GMT +08:00) 北京时间',
                    value: '+08:00'
                },
                {
                    name: '(GMT +07:00) 曼谷时间',
                    value: '+07:00'
                },
                {
                    name: '(GMT +06:00) 达卡时间',
                    value: '+06:00'
                },
                {
                    name: '(GMT +05:00) 马尔代夫时间',
                    value: '+05:00'
                },
                {
                    name: '(GMT +04:00) 迪拜时间',
                    value: '+04:00'
                },
                {
                    name: '(GMT +03:00) 莫斯科时间',
                    value: '+03:00'
                },
                {
                    name: '(GMT +02:00) 雅典时间',
                    value: '+02:00'
                },
                {
                    name: '(GMT +01:00) 柏林时间',
                    value: '+01:00'
                },
                {
                    name: '(GMT +00:00) 伦敦时间',
                    value: '+00:00'
                },
                {
                    name: '(GMT -01:00) 亚速尔群岛时间',
                    value: '-01:00'
                },
                {
                    name: '(GMT -02:00) 费尔南多·迪诺罗尼亚时间',
                    value: '-02:00'
                },
                {
                    name: '(GMT -03:00) 布宜诺斯艾利斯时间',
                    value: '-03:00'
                },
                {
                    name: '(GMT -04:00) 波多黎各时间',
                    value: '-04:00'
                },
                {
                    name: '(GMT -05:00) 美国东部时间',
                    value: '-05:00'
                },
                {
                    name: '(GMT -06:00) 中部时间',
                    value: '-06:00'
                },
                {
                    name: '(GMT -07:00) 落基山地区标准时间（亚利桑那州）',
                    value: '-07:00'
                },
                {
                    name: '(GMT -08:00) 美国西岸太平洋时间',
                    value: '-08:00'
                },
                {
                    name: '(GMT -09:00) 阿拉斯加当地时间',
                    value: '-09:00'
                },
                {
                    name: '(GMT -10:00) 夏威夷时间',
                    value: '-10:00'
                }
            ],
            formOptions: {
                showResetBtn: false,
                showSearchBtn: false,
                inline: true,
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: []
            },
            columns: [
                {label: '广告账户编号', prop: 'adAccount'},
                {label: '账户时区', prop: 'timeZone'}
            ],
            rules: {
                adAccount: [
                    {required: true, message: '请输入广告账户编号', trigger: 'blur'}
                ],
                timeZone: [
                    {required: true, message: '请选择广告账户时区', trigger: 'blur'}
                ]
            }
        };
    },
    methods: {
        getData () {
            return new Promise((resolve, reject) => {
                fbReTrackingList({siteId: this.siteId}).then((res) => {
                    if (res.code === '200') {
                        let {data} = res;
                        data.forEach(s => {
                            const obj = this.timeZones.find(v => v.value === s.timeZone);
                            s.timeZone = obj.name;
                        });
                        this.bindData = data;
                        resolve(data);
                    }
                });
            });
        },
        handleCopy (recordValue) {
            this.$copyText(recordValue).then((e) => {
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            });
        },
        handleSubmit (name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    addFbReTracking({siteId: this.siteId, ...this.actConfig}).then((res) => {
                        this.$message.success('新增成功');
                        this.submitLoading = false;
                        this.actVisible = false;
                        this.$refs['el-search-table'].searchHandler(true);
                    });
                }
            });
        },
        handleDelDataTracking (id) {
            delReTracking(id).then(res => {
                if (res.code === '200') {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.$refs['el-search-table'].searchHandler(true);
                }
            });
        },
        handlePreview () {
            window.open('https://www.facebook.com/adsmanager/manage/campaigns', '_blank');
        },
        handleRestForm (name) {
            this.$refs[name].resetFields();
            this.actConfig = {
                adAccount: '',
                timeZone: ''
            };
        },
        handleDown () {
            const link = document.createElement('a');
            link.href = 'https://cdn.shoplazzay.com/shoplazzay-fb-assistant-1.15.6.zip';
            link.download = 'shopplus-fb-assistant-1.15.6.zip';
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
        }
    },
    mounted () {
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
};
</script>

<style lang="scss" scoped>
.search-list {
  h4 {
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

.container {
  padding: 0 0 0 40px;
  display: flex;
  justify-content: space-between;
}

.back {
  margin: 20px;
}

.container-content {
  display: flex;
  flex-direction: row;
}

.container-content img {
  height: 80px;
}

.container_top {
  margin-bottom: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  line-height: 30px;
  margin-left: 20px;
}

.container_title {
  font-size: 22px;
  color: #30344f;
  font-weight: 500;
}

.setting {
  padding: 0 15px;
  color: blue;
}

.footer {
  margin: 30px 0 40px 10px;
  padding: 0 0 0 5px;
  font-size: 14px;
  color: #666;
  line-height: 30px;
}

.content {
  display: flex;
  flex-direction: column;
  line-height: 30px;
  margin-left: 20px;
}

.content_title {
  margin: 0;
  font-size: 14px;
  padding: 30px 0 10px 0;
  color: #30354d
}

.content_e0ae {
  margin-bottom: 10px;
  color: #30354d;
  font-size: 14px;
  padding: 20px 0;
  margin: 15px 0 0 20px;
}

.account__value_8024 {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 15px 20px;
}

.tw-pb-2 {
  padding-bottom: 0.5rem !important;
}

.tw-items-center {
  align-items: center !important;
}

.tw-flex {
  display: flex !important;
}

.tw-rounded-full {
  font-size: 1rem;
  line-height: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
}

.tw-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.tw-pl-3 {
  padding-left: 0.75rem;
  margin: 0;
}

.tw-pl-\[22px\] {
  padding-left: 22px;
}

.tw-border-solid {
  border-style: solid;
}

.tw-border-l-\[1px\] {
  border-left-width: 1px;
}

.tw-border-0 {
  border-width: 0px;
}

.tw-mb-2\.5 {
  margin-bottom: 0.625rem;
}

.tw-ml-3 {
  margin-left: 0.75rem;
}

.tw-pb-\[30px\] {
  padding-bottom: 30px;
}

.tw-text-\[\#989AA6\] {
  --tw-text-opacity: 1;
  color: #989AA6;
}

.tw-pb-4 {
  padding-bottom: 1rem;
  margin: 0;
}
.tw-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
 .tw-py-2 {
   padding-top: 0.5rem ;
   padding-bottom: 0.5rem;
 }
 .tw-border-\[\#D9D9D9\] {
   --tw-border-opacity: 1;
   border-color: #D9D9D9;
 }
 .tw-border-solid {
   border-style: solid;
 }
 .tw-border-\[1px\] {
   border-width: 1px;
 }
 .tw-rounded-sm {
   border-radius: 0.125rem;
 }
 .tw-justify-between {
   justify-content: space-between;
 }
 .tw-items-center {
   align-items: center;
 }
 .tw-w-max {
   width: max-content;
 }
 .tw-flex {
   display: flex;
 }
</style>
